<template>
	<el-card :body-style="{ padding: '20px' }">
		<template #header>
			<div class="card-header">
				<span>就诊人管理</span>
				<el-button type="success" :icon="User" @click="addVisitor">添加就诊人</el-button>
			</div>
		</template>
		<!-- 展示就诊人卡片 -->
		<div v-if="showEdit === false && !$route.query.type" class="visitorList">
			<Visitor @refreshPage="refreshPage" @changeEdit="changeEdit" class="visitor" :visitor="item"
				v-for="(item, index) in allUser" :key="index" />
		</div>
		<!-- 编辑就诊人信息界面 -->
		<div v-else class="editVisitor">
			<!-- 分割线 -->
			<el-divider content-position="left">就诊人信息</el-divider>
			<el-form ref="formRef" style="width: 40%;margin: 10px auto 10px 80px">
				<el-form-item label="用户姓名">
					<el-input v-model="visitorInfo.name" placeholder="请输入就诊人姓名" />
				</el-form-item>
				<el-form-item label="证件类型">
					<el-select v-model="visitorInfo.certificatesType" placeholder="请选择证件类型" style="width: 100%;">
						<el-option v-for="(item, index) in certificatesType" :key="index" :label="item.name"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="证件号码">
					<el-input v-model="visitorInfo.certificatesNo" placeholder="请输入证件号码" />
				</el-form-item>
				<el-form-item label="用户性别">
					<el-radio-group v-model="visitorInfo.sex">
						<el-radio :label="1">男</el-radio>
						<el-radio :label="0">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="出生日期">
					<el-date-picker v-model="visitorInfo.birthdate" type="date" value-format="YYYY-MM-DD"
						placeholder="请选择出生日期" style="width: 100%;" />
				</el-form-item>
				<el-form-item label="手机号码">
					<el-input v-model="visitorInfo.phone" placeholder="请输入手机号" />
				</el-form-item>
			</el-form>
			<el-divider content-position="left">建档信息（完善后部分医院首次就诊不排队建档）</el-divider>
			<el-form ref="formRef" style="width: 40%;margin: 10px auto 10px 80px">
				<el-form-item label="婚姻状况">
					<el-radio-group v-model="visitorInfo.isMarry">
						<el-radio :label="1">已婚</el-radio>
						<el-radio :label="0">未婚</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="自费/医保">
					<el-radio-group v-model="visitorInfo.isInsure">
						<el-radio :label="0">自费</el-radio>
						<el-radio :label="1">医保</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="当前住址">
					<!-- 级联选择器 -->
					<el-cascader v-model="visitorInfo.addressSelected" :props="props" />
				</el-form-item>
				<el-form-item label="详细地址">
					<el-input v-model="visitorInfo.address" placeholder="请输入详细地址" />
				</el-form-item>
			</el-form>
			<el-divider content-position="left">联系人信息（选填）</el-divider>
			<el-form ref="formRef" style="width: 40%;margin: 10px auto 10px 80px">
				<el-form-item label="用户姓名">
					<el-input v-model="visitorInfo.contactsName" placeholder="请输入用户姓名" />
				</el-form-item>
				<el-form-item label="证件类型">
					<el-select v-model="visitorInfo.contactsCertificatesType" placeholder="请选择证件类型" style="width: 100%;">
						<el-option v-for="(item, index) in certificatesType" :key="index" :label="item.name"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="证件号码">
					<el-input v-model="visitorInfo.contactsCertificatesNo" placeholder="请输入证件号码" />
				</el-form-item>
				<el-form-item label="手机号码">
					<el-input v-model="visitorInfo.contactsPhone" placeholder="请输入手机号码" />
				</el-form-item>
			</el-form>
			<div class="btn" style="display: flex;margin-left: 180px;">
				<el-button type="success" @click="submit">提交</el-button>
				<el-button @click="reset">重写</el-button>
			</div>
		</div>
	</el-card>
</template>

<script setup lang="ts">
defineOptions({
	name: "Patient"
})
import { reqGetUser } from '@/api/hospital'
import { VisitorArr } from '@/api/hospital/type';
import { reqAddOrUpdateVisitor, reqCertificationType, reqCity } from '@/api/user';
import { AddOrUpdateData, CertificationTypeArr } from '@/api/user/type';
import { User } from '@element-plus/icons-vue/global'
import { CascaderProps, ElMessage } from 'element-plus';
import { onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from "vue-router"


// 存储就诊人数组
const allUser = ref<VisitorArr>()
// 是否显示就诊人信息编辑界面
let showEdit = ref<boolean>(false)
// 存储就诊人信息
const visitorInfo = ref<AddOrUpdateData>(
	{
		"address": "",
		"addressSelected": [],
		"birthdate": "",
		"certificatesNo": "",
		"certificatesType": "",
		"contactsCertificatesNo": "",
		"contactsCertificatesType": "",
		"contactsName": "",
		"contactsPhone": "",
		"isInsure": 0,
		"isMarry": 0,
		"name": "",
		"phone": "",
		"sex": 0,
	}
)
// 存储证件类型
let certificatesType = ref<CertificationTypeArr>()
// 级联选择器的数据
const props: CascaderProps = {
	// 懒加载数据
	lazy: true,
	async lazyLoad(node, resolve) {
		let result = await reqCity(node.data!.id as number || 86)
		// 整理数据
		let showData = result.data.map((item => {
			return {
				id: item.id,
				label: item.name,
				value: item.value,
				leaf: !item.hasChildren
			}
		}))
		resolve(showData)
	}
}
// 创建一个路由和路由器
const route = useRoute()
const router = useRouter()

// 获取所有就诊人信息
async function getAllUser() {
	let result = await reqGetUser()
	if (result.code) {
		allUser.value = result.data
	}
}
// 获取证件类型
async function getCertationType() {
	let result = await reqCertificationType()
	if (result.code === 200) {
		certificatesType.value = result.data
	}
}
// 添加就诊人
function addVisitor() {
	// 清空编辑数据
	reset()
	// 显示编辑界面
	showEdit.value = true
}
// 清空编辑数据
function reset() {
	Object.assign(visitorInfo.value, {
		"id": null,
		"address": "",
		"addressSelected": [],
		"birthdate": "",
		"certificatesNo": "",
		"certificatesType": "",
		"contactsCertificatesNo": "",
		"contactsCertificatesType": "",
		"contactsName": "",
		"contactsPhone": "",
		"isInsure": 0,
		"isMarry": 0,
		"name": "",
		"phone": "",
		"sex": 0,
	})
}
// 子组件自定义回调
function changeEdit(visitor: any) {
	showEdit.value = true
	// 合并对象
	Object.assign(visitorInfo.value, visitor)
}
function refreshPage() {
	getAllUser()
}
// 提交按钮的回调
async function submit() {
	try {
		// 发送请求
		await reqAddOrUpdateVisitor(visitorInfo.value)
		// 弹框提示
		ElMessage({
			type: "success",
			message: visitorInfo.value.id ? "更新成功" : "新增成功"
		})
		// 切换场景
		if (route.query.type) {
			router.back()
		} else {
			showEdit.value = false
		}
		// 获取所有就诊人信息
		getAllUser()
	} catch (error) {
		ElMessage({
			type: "error",
			message: visitorInfo.value.id ? "更新失败" : "新增失败"
		})
	}
}

// 监听就诊人数组
watch(() => allUser.value, () => {
	// 如果路由携带就诊人 id ,从数组中挑选出相应的就诊人
	if (route.query.id) {
		let user = allUser.value?.find((item: any) => {
			return item.id == route.query.id
		})
		Object.assign(visitorInfo.value, user)
	}
})
// 挂载后获取数据
onMounted(() => {
	// 获取就诊人信息
	getAllUser()
	// 获取证件类型
	getCertationType()
})
</script>

<style lang="scss" scoped>
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.visitorList {
	display: flex;
	flex-wrap: wrap;

	.visitor {
		width: 32%;
		margin: 5px;
	}
}
</style>